import { BlogHeader } from "@/components/blog-header"
import { BlogFooter } from "@/components/blog-footer"
import { BlogPostCard } from "@/components/blog-post-card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { getFeaturedPosts } from "@/lib/blog"

export default async function HomePage() {
  const featuredPosts = await getFeaturedPosts(3)

  return (
    <div className="min-h-screen flex flex-col">
      <BlogHeader />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="py-20 px-4 text-center bg-gradient-to-b from-muted/50 to-background">
          <div className="container max-w-4xl mx-auto">
            <h1 className="text-4xl md:text-6xl font-bold text-balance mb-6">
              欢迎来到我的<span className="text-primary">创意</span>角落
            </h1>
            <p className="text-xl text-muted-foreground text-pretty mb-8 leading-relaxed">
              这里是我分享关于技术、设计和生活的思考、经验和见解的地方。加入我这段持续学习和探索的旅程吧。
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg">
                <Link href="/blog">探索文章</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/about">关于我</Link>
              </Button>
            </div>
          </div>
        </section>

        {/* Featured Posts */}
        <section className="py-16 px-4">
          <div className="container mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4">最新文章</h2>
              <p className="text-muted-foreground text-lg">值得分享的最新思考和发现</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12 justify-items-center">
              {featuredPosts.map((post) => (
                <BlogPostCard key={post.slug} {...post} />
              ))}
            </div>

            <div className="text-center">
              <Button variant="outline" asChild>
                <Link href="/blog">查看所有文章</Link>
              </Button>
            </div>
          </div>
        </section>

        {/* Newsletter Section */}
        <section className="py-16 px-4 bg-muted/50">
          <div className="container max-w-2xl text-center mx-auto">
            <h2 className="text-3xl font-bold mb-4">保持更新</h2>
            <p className="text-muted-foreground mb-8 leading-relaxed">
              当我发布新文章时获得通知。无垃圾邮件，只有优质内容直达您的收件箱。
            </p>
            <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
              <input
                type="email"
                placeholder="输入您的邮箱"
                className="flex-1 px-4 py-2 rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
              />
              <Button>订阅</Button>
            </div>
          </div>
        </section>
      </main>

      <BlogFooter />
    </div>
  )
}
